import React, { Component } from 'react';
import Taro from '@tarojs/taro';
import {Image, View} from '@tarojs/components'
import { RecordItem } from '../../utils/server.interface'
import { http } from '../../utils/http'
import {USER_CONSUME_FEE_ACCOUNT_LIST, RESOURCE_URL} from '../../constants/api'
import {vcmonitor} from "../../utils/tools";
import GzhAuth from "../../components/gzh-auth/gzh-auth"
import './userCoinBalance.scss'

interface PageType {
  curTabIndex: number
  loadMoreStatus: "more" | "loading" | "noMore"
  recordList: RecordItem[]
}
export default class Record extends Component {
  state: PageType = {
    curTabIndex: 0,
    loadMoreStatus: 'loading',
    recordList: []
  }
  async onReachBottom() {
    if(this.state.loadMoreStatus != 'noMore') {
      this.setState({ loadMoreStatus: 'loading'})
      this.page++
      const recordList = await this.getData(this.page)
      const old = this.state.recordList
      if(recordList){
        this.setState({recordList: [...old, ...recordList]})
      }

    }
  }
  page = 1
  async componentDidShow(){
    vcmonitor(this)
    const recordList = await this.getData(this.page)
    this.setState({recordList})
  }
  async getData(page) {
    Taro.showLoading({title:'加载中...',mask:true})
    const ret = await http.HGet(USER_CONSUME_FEE_ACCOUNT_LIST, {page: page, limit: 10})
    if (ret) {
      Taro.hideLoading()
    }
    const recordList = ret.data
    if(recordList && recordList.length >= 10){
      this.setState({ loadMoreStatus: 'more'})
    } else {
      this.setState({ loadMoreStatus: 'noMore'})
    }
    return recordList
  }
  render() {
    const { recordList } = this.state
    return(
      <View className='rule-page-root'>
        <GzhAuth />
        {recordList.map(item => <View className='item'>
          <View className='title'>{item.subject}
            <View className='time'>{item.add_date}</View>
            <View className='m-t'>{item.product_name}</View>
          </View>
          <View className={item.money < 0 ? "total_amount" : "total_amount yellow"}>{item.money}</View>
        </View>)}
        {recordList.length <= 0 && <View className='listNull' style='top: 20% !important;'>
          <Image src={`${RESOURCE_URL}/resources/images/shopnull.png`} mode='widthFix' />
          <View className='text'>什么都没有,去看看别的吧~</View>
        </View>}
      </View>
    )
  }
}
